<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现一个宽高自适应的正方形</title>
<style type="text/css">
</style>
</head>
<body>
<pre>
/*1.第一种方式是利用vw来实现*/
.square {
  width: 10%;
  height: 10vw;
  background: tomato;
}

/*2.第二种方式是利用元素的margin/padding百分比是相对父元素width的性质来实现*/
.square {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background: orange;
}

/*3.第三种方式是利用子元素的margin-top的值来实现的*/
.square {
  width: 30%;
  overflow: hidden;
  background: yellow;
}

.square::after {
  content: '';
  display: block;
  margin-top: 100%;
}
<a href="http://cavszhouyou.top/Demo-Display/AdaptiveSquare/index.html" rel="nofollow">《自适应正方形 demo 展示》</a>
</pre>
<script type="text/javascript">
</script>
</body>
</html>